<template>


	<view >
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-flex uni-column">

				<!-- 累计收益模块 -->
				<view class="bgimage">
					<view class="money">
						<view class="uni-flex uni-row">
							<!-- 
						 <view class="money-a">
						 	<view class="money-ac">
						 		<view class="money-b" @tap="goEarningsDetails" >累计收益</view>
						 		<view class="eye-pic" :class="[!show ? '': 'unshow']" @tap="eye"></view>
						 	</view>
						 	<view class="money-c" v-if="!show" @tap="goEarningsDetails" >￥{{total_num}}</view>
						 	<view class="money-c" v-else>￥******</view>
						 </view>
						 <view class="money-a">
						 	<view class="money-b">昨日收益</view>
						 	<view class="money-c" v-if="!show">￥{{yestoday}}</view>
						 	<view class="money-c" v-else>￥****</view>
						 </view>-->
							<view class="money-a">
								<view class="money-ac">
									<view class="money-b" @tap="goEarningsDetails">累计收益</view>
								</view>
								<view class="money-c" @tap="goEarningsDetails">￥{{total_num}}</view>
							</view>
							<view class="money-d">
								<view class="money-b">昨日收益</view>
								<view class="money-c">￥{{yestoday}}</view>
							</view>
						</view>

					</view>
				</view>

				<view class="indexback">

					<view class="bind">
						<!-- 进行分层编写，方便样式修改 -->
						<view class="bind-infos" @tap="toEqu(4,0)">
							<view class="bind-num" style="color: dodgerblue;">{{equipment_num}}</view>
							<view class="bind-font">设备总数</view>
						</view>
						<view class="bind-infos" @tap="toEqu(1,1)">
							<view class="bind-num" style="color: green;">{{zaixian}}</view>
							<view class="bind-font">在线设备</view>
						</view>
						<view class="bind-infos" @tap="toEqu(2,2)">
							<view class="bind-num" style="color: red;">{{lixian}}</view>
							<view class="bind-font">离线设备</view>
						</view>
						<view class="bind-infos" @tap="toEqu(3,3)">
							<view class="bind-num" style="color:darkorange;">{{yichang}}</view>
							<view class="bind-font">异常设备</view>
						</view>
					</view>
					
					<!-- <view class="bind"  @tap="toEqu(4,0)"> -->
						<!-- 进行分层编写，方便样式修改 -->
						<!-- <view class="bind-infos">
							<view class="bind-num" style="color: dodgerblue;">{{equipment_num}}</view>
							<view class="bind-font">设备总数</view>
						</view>
						<view class="bind-infos">
							<view class="bind-num" style="color: green;">{{zaixian}}</view>
							<view class="bind-font">在线设备</view>
						</view>
						<view class="bind-infos">
							<view class="bind-num" style="color: red;">{{lixian}}</view>
							<view class="bind-font">离线设备</view>
						</view>
						<view class="bind-infos">
							<view class="bind-num" style="color:darkorange;">{{yichang}}</view>
							<view class="bind-font">异常设备</view>
						</view>
					</view> -->
					
			

					<!-- 介绍展示区域 -->
					<!-- <view class="recommend-all"> -->
						<!-- 上方内容布局 -->
						<!-- <view class="uni-flex uni-row">
							<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/index/tech.png" class="recommend-pic" mode="widthFix"></image>
						</view>
					</view> -->

					<view class="manage">

						<view class="choose">
							<view class="bind-box" style="text-align: center; " @tap="invite">
								<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/index/friends.png" mode="widthFix"
									style="width: 72rpx; height: 72rpx;margin-bottom: 10rpx;"></image>
								<view style="font-size: 28rpx;">邀请好友</view>
							</view>
							<view class="bind-box" style="text-align: center;" @tap="add_Equip">
								<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/index/equipment.png" mode="widthFix"
									style="width: 72rpx; height: 72rpx;margin-bottom: 10rpx;"></image>
								<view style="font-size: 26rpx;">添加设备</view>
							</view>
							<view class="bind-box" style="text-align: center;" @tap="teach">
								<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/index/tutorial.png" mode="widthFix"
									style="width: 72rpx; height: 72rpx;margin-bottom: 10rpx;"></image>
								<view style="font-size: 26rpx;">新手教程</view>
							</view>

						</view>
					</view>


					<view class="box-img" v-if="showimg" @tap="conealImg"></view>

					<view class="modal-img" v-if="showimg">
						<view class="yqtitle">
							邀请二维码
						</view>
						<view class="content">
							<image :src="inviteimageUrl" mode="heightFix" style="height: 500rpx; width: 500rpx;">
							</image>
						</view>
					</view>


					<!-- 选择添加设备1 -->
					<view class="node-box" v-if="nodeShow"  @tap="conealNodeShow"></view>
					
					<view class="node-modal" v-if="nodeShow">
						<view class="title">
							选择添加类型
						</view>
						<view class="content" style="display: block;margin-left: 180rpx;">
							<view style="margin-bottom: 20rpx;">
								<label class="radio" style="margin-right: 30rpx;" @tap="nodechange(1)">
									<radio value="小节点" :checked="checked1" color="#4CD964"/>小节点
								</label>
							</view>
							<view style="margin-bottom: 20rpx;">
								<label class="radio" style="margin-right: 30rpx;" @tap="nodechange(2)">
									<radio value="大节点" :checked="checked2" color="#4CD964"/>大节点A
								</label>
							</view>
							<view style="margin-bottom: 20rpx;">
								<label class="radio" style="margin-right: 30rpx;" @tap="nodechange(3)">
									<radio value="大节点" :checked="checked3" color="#4CD964"/>大节点B
								</label>
							</view>
						</view>
						<view class="btn-group1">
							<view class="coneal" @tap="conealNodeShow">取消</view>
							<view class="submit" @tap="comfimNodeShow">确认</view>
						</view>
					</view>
					
					<!-- 选择添加设备2 -->
					<view class="box" v-if="show" @tap="coneal"></view>
					
					<view class="modal-group" v-if="show">
						<view class="title">
							选择添加类型
						</view>
						<view class="ragro">
							<view>
								<label class="radio" style="margin: 30rpx; padding-left: 120rpx;" @tap="change(3)">
									<radio value="电视盒子" :checked="checkedB" 
									style="transform: scale(0.8);"
									color="#ff5500"/>TV-Box
								</label>
							</view>
							<view>
								<label class="radio" style="margin: 30rpx;padding-left: 120rpx;" @tap="change(2)">
									<radio value="X86盒子" :checked="checkedA" 
									style="transform: scale(0.8);"
									color="#ff5500"/>X86工控机
								</label>
							</view>
							<view>
								<label class="radio" style="margin: 30rpx;padding-left: 120rpx;" @tap="change(4)">
									<radio value="路由器" :checked="checkedC"
									style="transform: scale(0.8);" 
									color="#ff5500"/>路由器
								</label>
							</view>
						</view>
						<view class="btn-group">
							<view class="coneal-group" @tap="coneal">取消</view>
							<view class="submit-group" @tap="comfim">确定</view>
						</view>
					</view>

					<!-- 收益排行榜 -->
					<view class="list-all">
						<!-- 收益排行榜 上方内容布局 -->
						<view class="listt">
							<!-- 进行分层编写，方便样式修改 -->
							<view class="line">
								<!-- <image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/index/line.png" class="list-left"></image> -->
							</view>
							<view class="list-mid">
								<view style="font-weight: bold;margin-bottom: 20rpx; color: #5e5e5e; ">每日收益排行榜</view>
							</view>
						</view>
						<!-- 收益排行展示区域 -->
						<view class="list-box">
							<view class="list-title">
								<view v-for="(tab,index1) in tabBars" :key="index1" class="title-name"
									@tap="chooseType(index1)" :class=' tabIndex == index1?"active":"" '>{{tab}}</view>

							</view>
							<view class="list">
								<view class="one" v-for="(item,index) in listDataE" :key='index'>
									<view>
										<view class="dot" v-if="index == 0">1</view>
										<view class="dot" v-else-if="index == 1">2</view>
										<view class="dot" v-else-if="index == 2">3</view>
										<view class="dotg" v-else-if="index == 3">4</view>
										<view class="dotg" v-else-if="index == 4">5</view>
										<view class="dotg" v-else-if="index == 5">6</view>
										<view class="dotg" v-else-if="index == 6">7</view>
										<view class="dotg" v-else-if="index == 7">8</view>
										<view class="dotg" v-else-if="index == 8">9</view>
										<view class="dotg" v-else="index == 9">10</view>
									</view>
									<view class="phone">{{item.name}}</view>
									<view class="price">¥{{item.yesterday_share_money}}</view>
								</view>

							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>


</template>

<script>
	var _self;
	let App = getApp();
	import lwNotice from '@/components/lw-notice/lw-notice.vue';
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			lwNotice
		},
		
		data() {
			return {
				yichang: 0,
				lixian: 0,
				zaixian: 0,
				equipment_num: 0,
				total_num: 0.00,
				userid: "",
				yesnum: 0,
				mushnum: 0,
				adminid: 0,
				waitmoney: 0,
				chooseEquip: false,
				SN: '',
				show: false,
				items: [{
						value: 'smallCode',
						name: '小节点'
					},
					{
						value: 'bigCodeA',
						name: '大节点A',
						// checked: 'true'
					},
					{
						value: 'bigCodeB',
						name: '大节点B'
					},
				],
				current: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				yestoday: 0,
				tabBars: ['TV-BOX','X86'],
				// 'OEA', '手机宝', 'OEC-torbo', 'OES系列', 'OEC'
				tabIndex: 0,
				code: '',
				noticebarText: [],
				listData: [],
				listDataE: [],
				show: false,
				type:3,
				// checked: 3,
				// checked: false,
				checked1:true,
				checked2:false,
				checked3:false,
				checkedA:false,
				checkedB:true,
				checkedC:false,
				level: 0,
				sys: 0,
				SN: '',
				advertisementAll: false,
				imgAll: '',
				advertisement: false,
				img: '',
				mark: true,
				nodeShow: false,
				nodeType: 1,
				inviteimageUrl: '',
				showimg: false,
				openSettingBtnHidden: true, //是否授权
				equType:2,//为避免冲突，设备排行类
				shownum:2
			}
		},
		onLoad() {
			_self = this;
		},

		onShow() {
			// uni.hideShareMenu()
			this.equType = uni.getStorageSync('equType');
			// this.checked = 3
			this.sys = App.globalData.sys
			// this.checkLogin();
			if(this.shownum != 1){
				this.checkLogin();
			}
		},
		methods: {
			eye: function() {
				this.show = !this.show;
			},
			//设备排行导航
			chooseType(index) {
				this.tabIndex = index
				this.page = 1
				let userinfo = uni.getStorageSync('userinfo');
				// uni.showLoading({
				// 	title:"加载中"
				// })
				let object = {'sys':App.globalData.sys};
				if(index == 0){
					object.type = 3
					this.equType = 3
				}else if(index == 1){
					object.type = 2
					this.equType = 2
				}
				this.$api.interfaceApi('rankList')(
					object
				).then(res=>{
					// console.log(object) // type:2  user_id:!!!   sys
					 // console.log('排序type:'+this.equType)
					 if(object.type==2){
						 uni.setStorageSync('equType',this.equType);
						 this.listDataE = res.data
					 }else if(object.type==3){
						 uni.setStorageSync('equType',this.equType);
						 this.listDataE = res.data
					 }
				})
				
			},
			//设备列表排行
			rankList() {
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('rankList')({
					'type': this.equType,
					'sys': App.globalData.sys
				}).then(res => {
					if(res.data){
						this.listDataE = res.data
						uni.setStorageSync('equType',this.equType);
						this.chooseType(0);
						console.log(this.listDataE)
						// console.log('排行type:'+this.equType)
					}
				})
			},
			//邀请
			invite() {
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title: "邀请码生成中"
				})
				this.$api.interfaceApi('getQRCode')({
					'id': userinfo.id,
					'admin': App.globalData.sys
				}).then(res => {
					this.inviteimageUrl = res.data
					this.showimg = true
					uni.hideLoading()
				})
			},
			conealImg() {
				this.showimg = false
			},
			comfimImg() {
				this.showimg = false
			},
			
			// 添加设备1
			add_Equip() {
				// let _this = this;
				let userinfo = uni.getStorageSync('userinfo');
				this.nodeShow = true
				// uni.scanCode({
				// 	success: function(res) {
				// 		_this.SN = res.result
				// 		_this.sn = res.result
				// 		_this.chooseEquip = true;
				// 	}
				// });
				// this.chooseEquip = true
			},
			conealNodeShow(){
				this.nodeShow = false
			},
			comfimNodeShow(){
				if(this.nodeType == 1){
					this.shownum = 1
					let _this = this;
					this.nodeShow = false
					uni.scanCode({
					    success: function (res) {
							_this.show = true;
							_this.sn = res.result
					    }
					}); 
				}else if(this.nodeType == 2){
					uni.navigateTo({
						url:'/pages/index/add'
					})
				}
				else if(this.nodeType == 3){
					uni.navigateTo({
						url:'/pages/index/adds'
					})
				}
			},
			
			nodechange(num){
				if(num == 1){
					this.checked1 = true
					this.checked2 = false
					this.checked3 = false
					this.nodeType = 1
				}else if(num == 2){
					this.checked1 = false
					this.checked2 = true
					this.checked3 = false
					this.nodeType = 2
				}
				else if(num == 3){
					this.checked1 = false
					this.checked2 = false
					this.checked3 = true
					this.nodeType = 3
				}
			},
			// 添加设备2
			coneal() {
				// this.chooseEquip = false
				this.shownum = 2
				this.show = false
			},
			comfim() {
				console.log('设备type:'+this.type)
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('add')({
					'sn': this.sn,
					"id": userinfo.id,
					'admin_id': App.globalData.sys,
					'type': this.type
				}).then(res => {
					console.log(res)
					this.show = false
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				});
				// this.chooseEquip = false;
				console.log(this.checkedA,this.checkedB,this.checkedC,this.type)
			},
			change(num) {
				if (num == 2) {
					this.checkedA = true
					this.checkedB = false
					this.checkedC = false
					this.type = 2
				} else if (num == 3) {
					this.checkedA = false
					this.checkedB = true
					this.checkedC = false
					this.type = 3
				} else if (num == 4) {
					this.checkedA = false
					this.checkedB = false
					this.checkedC = true
					this.type = 4
				}
			},
			// radioChange(evt) {
			// 	for (let i = 2; i < this.items.length; i++) {
			// 		if (this.items[i].value === evt.detail.value) {
			// 			this.current = i;
			// 			break;
			// 		}
			// 	}
			// },
			//新手教程
			teach(){
				uni.navigateTo({
					url:`/pages/index/teach?sys=${this.sys}&type=1`
				})
			},
			//查看设备
			toEqu(value, index) {
				uni.setStorageSync('equValue', value);
				uni.setStorageSync('equIndex', index);
				uni.switchTab({
					url: `/pages/equipment/equipment`
				})
			},
			checkLogin() {
				let userinfo = uni.getStorageSync('userinfo');
				if (!userinfo) {
					uni.login({
						provider: 'weixin',
						success: (res) => {
							this.$api.interfaceApi('getOpenid')({
								code: res.code
							}).then(result => {
								if (result.code == 200) {
									uni.setStorageSync('userinfo', result.data)

									this.getUserinfo();
								} else {
									uni.showToast({
										title: "请重新登录",
										icon: 'none'
									})
								}
							})
						}
					});


				} else {
					this.getUserinfo();
					this.rankList();
				}
			},

			getUserinfo() {
				let userinfo = uni.getStorageSync('userinfo');

				// uni.showLoading({
				// 	title:"加载中"
				// })

				this.$api.interfaceApi('getUserinfo')({
					'id': userinfo.id,
					'admin': App.globalData.sys
				}).then(res => {
					// uni.hideLoading()
					//检查广告是否存在
					// this.checkGg();
					App.globalData.mark = false
					this.total_num = res.data.total_num
					this.yestoday = res.data.profit
					this.equipment_num = res.data.equipment_num
					this.zaixian = res.data.zaixian
					this.lixian = res.data.lixian
					this.yichang = res.data.yichang
					this.listData = res.data.list
					this.level = res.data.level
					// console.log(res.data)
					
				})
			},
			
			goEarningsDetails() {
				uni.navigateTo({
					url: `/pages/equipment/earningsDetails?sum=${this.total_num}&yestoday=${this.yestoday}`
				})
			},

		}
	}
</script>

<style scoped>
	@import url("index.css");
	@import url("../../common/uni.css")
</style>